<template>
  <div class="home-container">
    <!-- 轮播图部分 -->
    <el-carousel height="500px" class="hero-carousel">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="carousel-text">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <el-button type="primary" size="large" @click="handleCarouselAction(item)">{{ item.buttonText }}</el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 公司优势 -->
    <div class="features-section">
      <h2 class="section-title">我们的优势</h2>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="8" v-for="(feature, index) in features" :key="index">
          <div class="feature-card">
            <el-icon :size="40"><component :is="feature.icon" /></el-icon>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 产品展示 -->
    <div class="products-section">
      <h2 class="section-title">产品系列</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="(product, index) in products" :key="index">
          <el-card class="product-card" :body-style="{ padding: '0px' }">
            <img :src="product.image" class="product-image">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p>{{ product.description }}</p>
              <div class="certification-tags">
                <el-tag 
                  v-for="(cert, idx) in product.certifications" 
                  :key="idx" 
                  type="info" 
                  size="small"
                  class="cert-tag"
                >
                  <el-icon :size="12" style="margin-right: 5px;"><Medal /></el-icon>
                  {{ cert }}
                </el-tag>
              </div>
              <el-button type="primary" @click="showProductDetail(product)">查看技术参数</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 公司实力 -->
    <div class="company-strength">
      <h2 class="section-title">公司实力</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="(stat, index) in statistics" :key="index">
          <div class="stat-card">
            <div class="stat-number">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 询盘表单 -->
    <div class="inquiry-section">
      <h2 class="section-title">立即询盘</h2>
      <el-form :model="inquiryForm" :rules="rules" ref="inquiryFormRef" class="inquiry-form">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <el-form-item prop="name" label="公司名称">
              <el-input v-model="inquiryForm.name" placeholder="请输入公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item prop="contact" label="联系人">
              <el-input v-model="inquiryForm.contact" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <el-form-item prop="email" label="电子邮箱">
              <el-input v-model="inquiryForm.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item prop="phone" label="联系电话">
              <el-input v-model="inquiryForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="message" label="询盘内容">
          <el-input type="textarea" v-model="inquiryForm.message" rows="4" placeholder="请详细描述您的需求"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitInquiry">提交询盘</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Opportunity, Star, Trophy, Medal } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 轮播图数据
const carouselItems = [
  {
    image: '/images/food-grade-slider.jpg',
    title: '食品级包装专家',
    description: '通过FDA、EU10/2011食品接触材料认证',
    buttonText: '查看认证证书'
  },
  {
    image: '/images/production-line.jpg',
    title: '10万级无尘车间',
    description: '全自动智能化生产线，日产能50万袋',
    buttonText: '观看生产视频'
  },
  {
    image: '/images/material-lab.jpg',
    title: '原材料实验室',
    description: '严格检测ROHS、REACH等有害物质指标',
    buttonText: '查看检测报告'
  }
]

// 公司优势
const features = [
  {
    icon: 'Opportunity',
    title: '行业经验丰富',
    description: '服务500+国内外知名品牌'
  },
  {
    icon: 'Star',
    title: '品质保证',
    description: '严格的质量控制体系'
  },
  {
    icon: 'Trophy',
    title: '专业团队',
    description: '拥有20年行业经验的技术团队'
  }
]

// 产品数据
const products = [
  {
    name: '食品级复合袋',
    description: '通过FDA认证，适用于肉类、海鲜、速冻食品等',
    image: '/images/food-grade-bag.jpg',
    certifications: ['FDA', 'EU10/2011', 'GB4806.7-2016']
  },
  {
    name: '铝箔立体袋',
    description: '阻隔性优异，适用于咖啡、坚果、宠物食品',
    image: '/images/aluminum-foil-bag.jpg',
    certifications: ['ISO22000', 'HACCP']
  },
  {
    name: '自立拉链袋',
    description: '食品级PE材料，适用于零食、干果、茶叶包装',
    image: '/self-standing-bag.jpg',
    certifications: ['FDA', 'ROHS']
  },
  {
    name: '高温蒸煮袋',
    description: '耐121℃高温杀菌，适用于酱料、调理食品',
    image: '/images/retort-pouch.jpg',
    certifications: ['JAS', 'ISO9001']
  }
]

// 公司实力数据
const statistics = [
  { value: '20+', label: '年行业经验' },
  { value: '500+', label: '服务客户' },
  { value: '1000+', label: '产品种类' },
  { value: '50+', label: '国家地区' }
]

// 询盘表单
const inquiryFormRef = ref(null)
const inquiryForm = reactive({
  name: '',
  contact: '',
  email: '',
  phone: '',
  message: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  message: [
    { required: true, message: '请输入询盘内容', trigger: 'blur' },
    { min: 20, message: '内容需详细描述（至少20字）', trigger: 'blur' }
  ]
}

// 方法
const handleCarouselAction = (item) => {
  // 处理轮播图按钮点击
  console.log('Carousel action:', item)
}

const showProductDetail = (product) => {
  // 显示产品详情
  console.log('Product detail:', product)
}

const submitInquiry = async () => {
  if (!inquiryFormRef.value) return
  
  try {
    await inquiryFormRef.value.validate()
    // 模拟API调用
    const response = await fetch('/api/inquiry', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        company: inquiryForm.name,
        contact: inquiryForm.contact,
        email: inquiryForm.email,
        phone: inquiryForm.phone,
        message: inquiryForm.message,
        products: products.map(p => p.name),
        timestamp: new Date().toISOString()
      })
    })

    if (response.ok) {
      ElMessage.success('询盘提交成功，我们会尽快与您联系！')
      inquiryFormRef.value.resetFields()
      // 触发GA事件
      window.gtag('event', 'inquiry_submitted', {
        'event_category': 'engagement',
        'event_label': 'home_page'
      })
    } else {
      throw new Error('提交失败，请稍后再试')
    }
  } catch (error) {
    ElMessage.error(error.message || '提交过程中出现错误')
    console.error('Inquiry submission error:', error)
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
}

.hero-carousel {
  margin-bottom: 60px;
}

.carousel-content {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.carousel-text {
  background: rgba(0, 0, 0, 0.5);
  padding: 40px;
  border-radius: 8px;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
  color: #333;
}

.features-section,
.products-section,
.company-strength,
.inquiry-section {
  padding: 60px 0;
}

.feature-card {
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.product-card {
  margin-bottom: 30px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 20px;
}

.stat-card {
  text-align: center;
  padding: 30px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.stat-label {
  color: #666;
}

.inquiry-section {
  background: #f5f7fa;
}

.inquiry-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .section-title {
    font-size: 24px;
  }
  
  .carousel-content {
    padding: 20px;
  }
  
  .carousel-text {
    padding: 20px;
  }
}
</style>
